<div class="content">
    <div id="example_title">
        <h1>Maps and Arrays</h1>
        A field can be an array of values (or a map of key values pairs).
    </div>
    <div id="example_view"></div>
    <div id="example_code"></div>
</div>

<!--CODE-->
<div id="form" style="width: 750px; height: 600px">

</div>

<!--CODE-->
<script type="module">
import { w2form, w2ui, w2popup, w2alert } from '__W2UI_PATH__'

let form = new w2form({
    box: '#form',
    name: 'form',
    url: 'server/post',
    record: {
        map: {
            key1: 'value 1',
            key2: 'value 2'
        },
        array: [
            'value1',
            'value2'
        ]
    },
    fields : [
        { field: 'map', type: 'map',
            html: {
                group: 'Map - no duplicate keys',
                label: 'Map',
                span: 4,
                key: {
                    attr: 'placeholder="key" style="width: 80px"',
                    text: ' = '
                },
                value: {
                    attr: 'placeholder="value" style="width: 100px"',
                    text: ' - ok'
                }
            }
        },
        { field: 'array', type: 'array',
            html: {
                group: 'Array - can have duplicate keys',
                label: 'Array',
                span: 4,
                value: {
                    attr: 'placeholder="Type to add..." style="width: 200px"',
                    text: ' - ok'
                }
            }
        }
    ],
    onChange(evt) {
        console.log(evt)
    },
    actions: {
        Reset() {
            this.clear();
        },
        Save() {
            if (form.validate().length == 0) {
                let rec = this.getCleanRecord()
                w2popup.open({
                    title: 'Form Data',
                    with: 600,
                    height: 550,
                    body: `<pre>${JSON.stringify(rec, null, 4)}</pre>`,
                    actions: { Ok: w2popup.close }
                })
            }
        },
        custom: {
            text: '<span style="font-size: 16px">←</span> click to see data',
            class: 'custom-class',
            style: 'background-image: none; background-color: transparent; border: 0px; margin: 0 0 0 -10px;',
            onClick() {
                w2alert('Not me!! The other button')
            }
        }
    }
})
</script>
